{% extends 'base.html' %}
{% block content %}
<h2 class="text-center mb-3">Search for Movies</h2>
<div class="input-group mb-4">
    <input id="searchInput" type="text" class="form-control" placeholder="Enter movie name...">
    <button id="searchBtn" class="btn btn-primary">Search</button>
</div>
<div id="results" class="row"></div>

<script>
$('#searchBtn').click(function(){
    const q = $('#searchInput').val().trim();
    if(!q) return alert('Enter a movie name!');
    $('#results').html('<p class="text-center">Searching...</p>');
    $.get("{% url 'search_movies' %}", { q: q })
        .done(function(data){
            $('#results').html('');
            if(data.Response === 'False'){
                $('#results').html(`<h4 class="text-danger text-center">${data.Error}</h4>`);
                return;
            }
            data.Search.forEach(function(movie){
                const poster = movie.Poster !== 'N/A' ? movie.Poster : 'https://via.placeholder.com/300x450';
                const card = `
                <div class="col-md-3 mb-4">
                    <div class="card bg-secondary text-light h-100">
                        <img src="${poster}" class="card-img-top" alt="${movie.Title}">
                        <div class="card-body">
                            <h5 class="card-title">${movie.Title}</h5>
                            <p>${movie.Year}</p>
                            <button class="btn btn-warning w-100 add-fav"
                                data-id="${movie.imdbID}"
                                data-title="${movie.Title.replace("'", "\'")}"
                                data-year="${movie.Year}"
                                data-poster="${poster}">⭐ Add to Favourites</button>
                        </div>
                    </div>
                </div>`;
                $('#results').append(card);
            });

            $('.add-fav').click(function(){
                const btn = $(this);
                const data = {
                    imdb_id: btn.data('id'),
                    title: btn.data('title'),
                    year: btn.data('year'),
                    poster: btn.data('poster')
                };
                $.post("{% url 'add_to_favourites' %}", data)
                    .done(function(res){
                        alert(res.message);
                    }).fail(function(xhr){
                        alert('Error: ' + xhr.responseText);
                    });
            });
        })
        .fail(function(){ $('#results').html('<p class="text-danger text-center">Search failed.</p>'); });
});
</script>
{% endblock %}